<template>
    <div class="container">
        <el-card class="center_card">
            <el-divider><h1>搜索结果: <span>{{this.$route.query.queryString}}</span></h1></el-divider>
            <el-input style="width: 70%;margin-left: 15%" v-model="queryString" >
                <el-button slot="append" @click="toSearch(queryString)">搜索书籍</el-button>
            </el-input>
            <el-divider><h3>全部结果：</h3></el-divider>

            <book-list :book-list="books"></book-list>
            <el-pagination :current-page="page" @current-change="change"></el-pagination>
        </el-card>
    </div>
</template>

<script>
    import axios from 'axios'
    import BookList from "../../reusable/BookList";
    export default {
        name: "SearchBooks",
        components: {BookList},
        data(){
            return{
                queryString:this.$route.query.queryString,
                page:1,
                books:[]
            }
        },
        mounted() {
            this.getList()
        },
        methods:{
            change(val){
                this.page = val;
                this.getList();
            },
            toSearch(param){
                this.$router.push({ path:'/home/search', query:{ queryString:param } })
                this.getList()
            },
            async getList(){
                let mydata = {
                    name:this.queryString,
                    page:(this.page-1)*10,
                    size:10,
                }
                axios.post('/api/book/searchBookByPage',mydata).then((res)=>{
                    console.log(res)
                    this.books=res.data.data
                })
            }
        }

    }
</script>

<style scoped>
    .container{
        width: 100%;
        margin-top: 10px;
    }
    .center_card{
        width: 70%;
        margin: auto;
    }
</style>
